<template>
    <theme-box title="操作员添加">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <form-group title="商户号" :required="true">
                    <select name="mchtId" class="form-control" v-model="mchtIdValue" style="width:265px;max-width:265px">
                        <option v-for="mcht in mchtList" :value="mcht.value">
                            {{mcht.key | option-value 23}}
                        </option>
                    </select>
                </form-group>
                <!--<form-select title="商户号" :required="true" :sreach="true" name="mchtId" v-model="mchtIdValue"-->
                             <!--:options="mchtList"></form-select>-->
                <form-input title="操作员名称" :required="true" name="oprName"></form-input>
                <form-input title="操作员密码" :required="true" name="oprPwd" type="password"></form-input>
                <form-group title="角色名称" :required="true" v-model="roleValue">
                    <select name="roleId" class="form-control" style="width: 265px;max-width: 265px">
                        <option v-for="role in roleList" :value="role.roleId">
                            {{role.roleTypeAndName}}
                        </option>
                    </select>
                </form-group>
                <form-select title="性别" name="oprSex" :options="sexOptions"></form-select>
                <form-textarea title="操作员描述" name="oprDsc" styles="width:698px;height:100px"></form-textarea>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <v-button type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right">确认</v-button>
            </div>
            <!-- /.box-footer -->
        </form>
    </theme-box>
</template>

<script>
    import 'plugins/jquery-validation';
    import {
        createDataTable
    } from 'ui/collections/general.js'
    var serialize = require('form-serialize');
    import 'lib/md5.js';

    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            mchtIdValue: "",
            roleValue: "",
            mchtList: [],
            roleList: [],
            item: {},
            columnsSet: [],
            sexOptions: [
                {key: "男", value: "MAN"},
                {key: "女", value: "WOMAN"}
            ],
            statOptions: [
                {key: "正常", value: "0"},
                {key: "锁定", value: "1"}
            ]
        }),
        created: function () {

        },
        watch: {
            mchtIdValue(v){
                let self = this;
                self.$post({
                    url: "/api/v1" + projectName_Url + "/plat/role/query/" + v,
                    method: "GET"
                }).then(response => {
                    let list = response.content.roleList;
                    self.$set("roleList", list)
                    if(list == ""){
                        Midway.alert({title: "操作提示",content:"请先添加角色"}).then(function () {
                            self.$route.router.go('/role/create');
                        })
                    }
                }, error => {
                });
            }
        },
        methods: {
            reset() {
                $("label.error").remove();
                this.$els.form.reset()
            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/role/" + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    self.$set("mchtList", list);
                    self.mchtIdValue = list[0].value
                }, error => {
                });
            },
        },
        ready() {
            var self = this;
            self.getMcht();
            $(this.$els.form).validate({
                submitHandler: async function () {
                    var _data = serialize(this.currentForm, {
                        hash: true,
                        empty: true
                    });
                    var password = $("#oprPwd").val();
                    //加密成md5
                    var passwd = $.md5(password);
                    _data.oprPwd = passwd
                    var result = await self.$post({
                        url: "/api/v1/plat/opr/add",
                        data: _data,
                        method: "post"
                    })
                    let data = {
                        title: "操作成功",
                        content: "是否进入操作列表查看?",
                    }
                    self.reset()
                    Midway.confirm(data).then(function () {
                        self.$route.router.go('/admin/list');
                    })

                },
                errorPlacement: function (error, element) {
                    if (element.attr("name") == "file") {
                        error.insertAfter(".file-item");
                    } else {
                        error.insertAfter(element)
                    }
                },
                rules: {
                    oprName: {
                        required: true,
                        maxlength:16
                    },
                    oprPwd: {
                        required: true,
                        maxlength: 32,
                        minlength: 8
                    },
                    oprStat: {
                        required: true
                    },
                    oprDsc: {
                        maxlength:64
                    },
                    roleId: {
                        required: true
                    },
                    mchtId: {
                        required: true
                    }
                }
            });
        }
    }


</script>
